<template>
	<view>
		<view class="header flex-colum-center">
			<image class="logo" mode="aspectFill" :src="logo"></image>
			<!-- <view style="font-size: 40rpx;color: #fff;margin-top: 28rpx;">欢迎使用运营助手</view> -->
		</view>
		<view class="loginBox">
			<!-- <tabs :tabs="tabs" @change="tabChange">
				<template #default="{item}"> -->
			<view class="main">
				<!-- 员工 -->
				<u--form v-if="tabIndex == 0" :model="form" ref="uForm" :rules="rules">
					<u-form-item prop="userName">
						<u--input
							v-model="form.userName"
							placeholder="请输入用户名"
							prefixIcon="account-fill"
							prefixIconStyle="font-size: 22px;color: #187FFE"
							clearable
							border="bottom"
						></u--input>
					</u-form-item>
					<u-form-item prop="password">
						<u--input
							v-model="form.password"
							type="password"
							placeholder="请输入密码"
							prefixIcon="lock-fill"
							prefixIconStyle="font-size: 22px;color: #187FFE"
							clearable
							border="bottom"
						></u--input>
					</u-form-item>
					<u-form-item v-if="isShowTenantCode" prop="tenantCode">
						<u--input
							v-model="form.tenantCode"
							placeholder="请输入商户号"
							prefixIcon="plus-people-fill"
							prefixIconStyle="font-size: 22px;color: #187FFE"
							clearable
							border="bottom"
						></u--input>
					</u-form-item>
				</u--form>
				<!-- 车主 -->
				<u--form v-if="tabIndex == 1" :model="form2" ref="uForm2" :rules="rules2">
					<u-form-item prop="userName">
						<u--input
							v-model.number="form2.phone"
							placeholder="请输入手机号"
							prefixIcon="account-fill"
							prefixIconStyle="font-size: 22px;color: #187FFE"
							clearable
							maxlength="11"
							border="bottom"
						></u--input>
					</u-form-item>
					<u-form-item prop="password">
						<u-input
							v-model.number="form2.verifyCode"
							type="code"
							placeholder="请输入验证码"
							prefixIcon="lock-fill"
							prefixIconStyle="font-size: 22px;color: #187FFE"
							clearable
							maxlength="6"
							border="bottom"
						>
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
								<text style="color: #2879FF;font-size: 28rpx;" @click="getCode">{{ tips }}</text>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
			</view>
			<!-- 	</template>
			</tabs> -->
			<view class="loginBtn" @click="submit">登录</view>
			<view class="logoType" @click="changeLogoType">{{ tabIndex == 0 ? '车主登录' : '员工登录' }}</view>
		</view>
		<view  class="loginBottom">
			<text style="font-size: 24upx;color: #a7a7a7;">{{companyName}}</text>
		</view>
	</view>
</template>

<script>
import { login, initData } from '@/api/login-api.js';
import * as loginApi from '@/api/carOwner-api.js';
import tabs from '@/components/layout/mmv-tabs.vue';
import settings from '@/settings.js';
export default {
	components: {
		tabs
	},
	data() {
		return {
			tabIndex: 0,
			tips: '',
			tabs: [{ label: '我是员工' }, { label: '我是车主' }],
			background: {
				background: '#fff'
			},
			form: {
				userName: '',
				password: '',
				tenantCode: ''
			},
			form2: {
				phone: '',
				code: ''
			},
			rules: {
				userName: [
					{
						required: true,
						message: '请输入用户名'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码'
					}
				],
				tenantCode: [
					{
						required: true,
						message: '请输入商户号'
					}
				]
			},
			rules2: {
				phone: [
					{
						required: true,
						message: '请输入手机号'
					}
				],
				verifyCode: [
					{
						required: true,
						message: '请输入验证码'
					}
				]
			},
			logo: settings.logo,
			companyName:settings.companyName,
			isShowTenantCode:settings.isShowTenantCode
			
		};
	},
	computed: {
		// isShowCompany() {
		// 	if (settings.appId == 'wxed87f4b50fa35e0c') {
		// 		//享达
		// 		return false;
		// 	}
		// 	return true;
		// },
		
		// isShowTenantCode() {
		// 	if (settings.appId == 'wxed87f4b50fa35e0c' || settings.appId == 'wxd8783f49e15f16f1' || settings.appId=='wx691e64193bc8e7bf') {
		// 		//享达|丰田|路易
		// 		return false;
		// 	}
		// 	return true;
		// }
		
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	
		if (settings.appId == 'wxd8783f49e15f16f1') {
			this.form.tenantCode = 'hncx';
		}else if(settings.appId == 'wxed87f4b50fa35e0c') {
			this.form.tenantCode = 'ylkj';
		}else if(settings.appId == 'wx691e64193bc8e7bf') {
			this.form.tenantCode = 'lykj';
		}
	},
	onShow() {
		if (this.$store.state.user.isLogin) {
			// 角色登录类型 1.员工 2.车主
			const roleType = this.$store.state.user.roleType;
			if (roleType == 2) {
				uni.redirectTo({
					url: '/pages/carOwner/carOwner'
				});
			} else {
				uni.switchTab({
					url: '/pages/home/home'
				});
			}
		}
	},
	methods: {
		// tab改变
		tabChange(item, index) {
			this.tabIndex = index;
		},
		changeLogoType() {
			if (this.tabIndex == 0) {
				this.tabIndex = 1;
			} else {
				this.tabIndex = 0;
			}
		},
		// 验证码发生改变
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (uni.$u.test.isEmpty(this.form2.phone)) {
				uni.$u.toast('请输入手机号');
				return;
			} else if (!uni.$u.test.mobile(this.form2.phone)) {
				uni.$u.toast('手机号格式不正确,请重新输入');
				return;
			}

			if (this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				});
				let params = {
					phone: this.form2.phone
				};
				loginApi
					.verifyPhone(this.toParams(params))
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		submit() {
			if (this.tabIndex == 0) {
				//员工
				if (this.$u.test.isEmpty(this.form.userName)) {
					this.$u.toast('请输入用户名');
					return;
				} else if (this.$u.test.isEmpty(this.form.password)) {
					this.$u.toast('请输入密码');
					return;
				} else if (this.$u.test.isEmpty(this.form.tenantCode)) {
					this.$u.toast('请输入商户号');
					return;
				} else {
					login({
						username: this.form.userName,
						password: this.form.password,
						tenantCode: this.form.tenantCode
					}).then(res => {
						if (res.code == 200) {
							this.$store.commit('user/saveToken', res.token);
							this.$store.commit('user/saveIsLogin', true);
							this.$store.commit('user/saveTenantCode', this.form.tenantCode);
							this.getInitData();
							uni.setStorageSync('token', res.token);

							this.$store.commit('user/saveRoleType', 1);
							uni.setStorageSync('roleType', 1);

							uni.switchTab({
								url: '/pages/home/home'
							});
						} else {
							this.$u.toast(res.msg);
						}
					});
				}
			} else if (this.tabIndex == 1) {
				//车主
				if (this.$u.test.isEmpty(this.form2.phone)) {
					this.$u.toast('请输入手机号');
					return;
				} else if (this.$u.test.isEmpty(this.form2.verifyCode)) {
					this.$u.toast('请输入验证码');
					return;
				} else {
					loginApi.wxJsCodeLogin(this.form2).then(res => {
						this.$store.commit('user/saveToken', res.token);
						this.$store.commit('user/saveIsLogin', true);
						this.$store.commit('user/savePhone', res.phone);
						uni.setStorageSync('token', res.token);
						uni.setStorageSync('phone', res.phone);

						this.$store.commit('user/saveRoleType', 2);
						uni.setStorageSync('roleType', 2);
						uni.redirectTo({
							url: '/pages/carOwner/carOwner'
						});
					});
				}
			}
		},

		getInitData() {
			initData().then(res => {
				if (res.code == 200) {
					this.$store.commit('initData/saveInitData', res.data);
				}
			});
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		// #ifdef MP-WEIXIN
		// this.$refs.uForm.setRules(this.rules);
		// this.$refs.uForm2.setRules(this.rules2);
		// #endif
	}
};
</script>

<style lang="less">
page {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	// background: url('https://qykh.shopec.com.cn/image-server/dz/b_login_bg.png') no-repeat;
	// background-size: 100% 100%;
}

.header {
	width: 100%;
	height: 480rpx;
	background: url('https://qykh.shopec.com.cn/image-server/dz/b_login_top.png') no-repeat;
	background-size: 100% 100%;
	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		display: block;
		margin-top: 130rpx;
		background-color: #177fff;
		box-sizing: border-box;
		background-color: #ffffff;
		padding: 10rpx;
		border-radius: 100rpx;
	}
}

.loginBox {
	margin: 0 60rpx;
	margin-top: 80rpx;
	padding-top: 20rpx;
	padding-bottom: 100rpx;
	box-sizing: border-box;
	box-shadow: 0 0 20px #002e8433;
	border-radius: 16rpx;
	background-color: #fff;
	position: relative;
	.main {
		margin-top: 20rpx;
		padding: 0 60rpx;
	}
	.loginBtn {
		margin-top: 40rpx;
		width: 518rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #4381fe;
		border-radius: 36px;
		color: #ffffff;
		position: relative;
		left: 50%;
		transform: translate(-50%);
	}
	.logoType {
		color: #187ffe;
		font-size: 28rpx;
		position: absolute;
		bottom: 20rpx;
		right: 50rpx;
	}
	.u-form-item--left {
		width: 120rpx;
		text-align: center;
	}
}
.loginBottom {
	width: 730rpx;
	height: 140rpx;
	background: url('https://qykh.shopec.com.cn/image-server/dz/b_login_bottom.png') no-repeat;
	background-size: 100% 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24upx;
	color: #a7a7a7;
	// text-align: center;
}
</style>
